<template>
  <div class="tender">
    <div class="tender-title">
      <p class="tender-text">电子招标板块</p>
    </div>
    <div class="data">
      <div class="data-item">
        <div class="item-top">
          <img src="@/assets/bigscreen2/icon_招标金额.png" alt="" />
          <count-to
            :startVal="0"
            :endVal="amount.value || 0"
            :duration="1500"
            class="val"
          ></count-to>
        </div>
        <p class="key">{{ amount.name }}({{ amount.unit }})</p>
      </div>
      <div class="data-item">
        <div class="item-top">
          <img src="@/assets/bigscreen2/icon_招标数.png" alt="" />
          <count-to
            :startVal="0"
            :endVal="bids.value || 0"
            :duration="1500"
            class="val"
          ></count-to>
        </div>
        <p class="key">{{ bids.name }}({{ bids.unit }})</p>
      </div>
      <div class="data-item">
        <div class="item-top">
          <img src="@/assets/bigscreen2/icon_月均发布数.png" alt="" />
          <count-to
            :startVal="0"
            :endVal="publications.value || 0"
            :duration="1500"
            class="val"
          ></count-to>
        </div>
        <p class="key">{{ publications.name }}({{ publications.unit }})</p>
      </div>
    </div>
    <div class="chart">
      <Echart id="tender-chart" :options="option" height="173px" width="100%" />
    </div>
  </div>
</template>
  
<script setup>
import { reactive, ref, onMounted } from "vue";
import Echart from "@/components/echart/index.vue";
import CountTo from "@/components/vueCountTo/vue-countTo.vue";
import { ajax } from "@/store/service";
import { dataGroup } from "@/utils";
import opt from "./option";

const amount = ref({});
const bids = ref({});
const publications = ref({});
const option = reactive({ ...opt });

const init = async () => {
  const [res] = await ajax.tender();
  amount.value = res.amount;
  bids.value = res.bids;
  publications.value = res.publications;
  const chart = dataGroup(res.chart);
  option.xAxis[0].data = chart.x;
  option.series[0].data = chart.y;
};

onMounted(() => {
  init();
});
</script>

<style scoped lang='scss'>
.tender {
  .tender-title {
    height: 80px;
    background-image: url("@/assets/bigscreen2/小标题背景.png");
    padding-left: 68px;
    padding-top: 15px;
    box-sizing: border-box;
    margin-top: 24px;
    .tender-text {
      font-size: 22px;
      font-family: JLinXin;
      font-weight: 600;
      line-height: 22px;
      background: #fffde8 linear-gradient(180deg, #e8feff 40%, #00a9ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .data {
    margin-left: 29px;
    height: 55px;
    display: flex;
    justify-content: space-between;
    .data-item {
      .item-top {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        img {
          width: 36px;
          height: 36px;
        }
        .val {
          font-size: 26px;
          font-family: D-DIN-PRO-Heavy, D-DIN-PRO;
          font-weight: 800;
          color: #ffffff;
          margin-left: 8px;
        }
      }
      .key {
        font-size: 14px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #ffffff;
        line-height: 21px;
        opacity: 0.8;
      }
    }
  }
  .chart {
    height: 173px;
    color: #fff;
    margin-left: 20px;
    margin-top: 32px;
  }
}
</style>